<script lang="ts" setup>
  import { requestBindCode } from '@/api/business/tracecode/detectionInfo'
  import BottomButton from '@/components/BottomButton/BottomButton.vue'
  import { HttpCodeEnum } from '@/enum/httpEnum'

  import Layout from '@/pages/detection/components/Layout.vue'
  const props = defineProps<{ codeValue: string }>()
  
  /**开始 */
  const start = async () => {
    const { responseCode, responseData } = await requestBindCode({ codeValue: props.codeValue,detectionType: 2 })
    if (responseCode === HttpCodeEnum.SUCCESS) {
      uni.navigateTo({
        url: `/pages/detection/questionnaire?publishId=${responseData.publishId}&detectionInfoId=${responseData.detectionInfoId}&detectionType=2`,
      })
    }
  }
</script>

<template>
  <Layout :title="'供体招募'" :is-scroll="true">
    <template #content>
      <view class="detection-text"> <text class="text">招募须知</text></view>
      <view class="light-text">欢迎您使用菌群供体招募服务！</view>
      <view class="status-text">供体招募共分五步：</view>
      <view class="status">
        1、填写问卷； <br />2、电话回访；<br />
        3、粪便初检；<br />4、宏基因检测；<br />
        5、医学血液体检；
      </view>
     
      <view class="status-text check-tip">检查无误请点击下列“开始”按钮</view>
    </template>
    <template #button>
      <BottomButton buttonText="开始" @on-click="start()" :is-pre="false"/>
    </template>
  </Layout>
</template>

<style lang="less">
  .detection-text {
    font-size: 44rpx;
    font-weight: 600;
    color: #002329;
    text-align: center;

    .text {
      position: relative;
      &::after {
        content: ' ';
        position: absolute;
        height: 12rpx;
        width: 100%;
        background: #faad14;
        bottom: -4rpx;
        left: 0;
      }
    }
  }

  .light-text {
    margin: 48rpx 0 0;
    color: #08979c;
  }

  .status-text {
    margin: 32rpx 0 0;
    color: #1d2129;
  }

  .status {
    margin: 32rpx 0 40rpx;
    line-height: 48px;
    color: #4e5969;
  }


  .check-tip {
    margin-top: 34rpx;
    text-align: center;
  }
</style>
